<template>
	<view v-if="detail" class="news-detail">
		<view class="news-title">
			<text>{{ detail.title }}</text>
		</view>
		<view class="news-basic">
			<text class="news-time">{{ $u.timeFrom(new Date(detail.createTime).getTime(), 'yyyy-mm-dd hh:MM') }}</text>
			<text class="news-count">{{ i18Replace($t('news.views'), { count:  detail.viewNum}) }}</text>
		</view>
		<view class="news-content" v-html="detail.content"></view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	import {
		getNewsDetail
	} from "../../apis/components/news";
	import {
		i18Replace
	} from "../../utils/functions";
	const newsId = ref(null);
	const detail = ref(null);

	const loadDetail = async () => {
		const data = await getNewsDetail(newsId.value);
		detail.value = data;
	}

	onLoad(({
		id
	}) => {
		newsId.value = id;
		loadDetail();
	})
</script>

<style lang="scss" scope>
	.news-detail {
		padding: 24rpx 32rpx;

		.news-title {
			// font-family: PingFang SC Bold;
			font-size: 32rpx;
			color: #DDDDDD;
		}

		.news-basic {
			@include flex(row);
			align-items: center;
			justify-content: space-between;
			margin-top: 36rpx;

			text {
				// font-family: PingFangSC;
				font-size: 24rpx;
				line-height: 1;
				color: #808080;
			}
		}

		.news-content {
			margin-top: 36rpx;
			// font-family: PingFangSC;
			font-size: 28rpx;

			color: #AEAEAE;

			& :deep(img) {
				max-width: 100%;
			}
		}

	}
</style>